<form method="post" key="set-mine" enctype="multipart/form-data" action="/admin/webim/save.html" class="layui-form">
	<#if inviteData??>
		<input type="hidden" name="id" value="${inviteData.id!''}">
		<input type="hidden" name="snsaccountid" value="${inviteData.snsaccountid!''}">
	</#if>
	<div class="row">
		<div class="col-lg-12">
			<div class="r3-customer-div setting-wrapper">
				<div class="box default-box">
					<div class="box-header">
						<h3 class="box-title">接入代码</h3>
					</div>
					<div class="box-body">
						<div class="r3-webim-tip">请将以下代码添加到你网站的 HTML
							源代码中，放在&lt;/body&gt;标签之前</div>
						<textarea class="r3-webim-sdk" readonly="readonly"><#if inviteData??>&lt;script src="${schema!''}://${hostname!''}:${import?string('###')}/im/${inviteData.id!''}.html"&gt;&lt;/script&gt;<#else></#if></textarea>
	
					</div>
				</div>
				<div class="box default-box">
					<div class="box-header">
						<h3 class="box-title">访客对话入口样式</h3>
					</div>
					<div class="box-body r3-im-theme">
						<div class="row" style="margin-right:0px;">
							<div class="col-md-8">
								<div class="r3-webim-tl">1、访客入口样式</div>
								<div class="box-item">
									<input type="hidden" name="consult_vsitorbtn_model" id="consult_vsitorbtn_model" value="<#if inviteData??>${inviteData.consult_vsitorbtn_model!'1'}<#else>1</#if>">
									<div class="r3-im-point <#if !(inviteData?? && inviteData.consult_vsitorbtn_model??) || (inviteData?? && inviteData.consult_vsitorbtn_model?? && inviteData.consult_vsitorbtn_model == '1')>r3-point-checked</#if>"
										data-class="r3-point-theme1" data-value="1">
										<div class="r3-point-theme1" style="text-align:center;">
											<div class="r3-im-point-text">
												<i class="layui-icon">&#xe63a;</i> <br> 在线客服
											</div>
										</div>
										<div class="ok">
											<i class="layui-icon">&#xe605;</i>
										</div>
									</div>
									<div class="r3-im-point <#if inviteData?? && inviteData.consult_vsitorbtn_model?? && inviteData.consult_vsitorbtn_model == '2'>r3-point-checked</#if>" data-class="r3-point-theme2" data-value="2">
										<div class="r3-point-theme2">
											<div class="r3-im-point-text">
												<i class="layui-icon">&#xe63a;</i> <br>在线客服
											</div>
										</div>
										<div class="ok">
											<i class="layui-icon">&#xe605;</i>
										</div>
									</div>
									<div class="r3-im-point <#if inviteData?? && inviteData.consult_vsitorbtn_model?? && inviteData.consult_vsitorbtn_model == '3'>r3-point-checked</#if>" data-class="r3-point-theme3" data-value="3">
										<div class="r3-point-theme3">
											<div class="r3-im-point-text">
												<i class="layui-icon">&#xe63a;</i> <br>在线客服
											</div>
										</div>
										<div class="ok">
											<i class="layui-icon">&#xe605;</i>
										</div>
									</div>
								</div>
								<div class="r3-webim-tl" style="clear:both;">2、选择入口颜色</div>
								<div class="box-item">
									<input type="hidden" name="consult_vsitorbtn_color" id="consult_vsitorbtn_color" value="<#if inviteData??>${inviteData.consult_vsitorbtn_color!'1'}<#else>1</#if>"> 
									<div class="item-cnt r3-im-ping-color" style="display: block;">
										<div class="r3-im-item theme1 <#if !(inviteData?? && inviteData.consult_vsitorbtn_color??) || (inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '1')>r3-im-checked</#if>"
											data-class="theme1" data-value="1">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme2 <#if inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '2'>r3-im-checked</#if>" data-class="theme2" data-value="2">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme3 <#if inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '3'>r3-im-checked</#if>" data-class="theme3" data-value="3">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme4 <#if inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '4'>r3-im-checked</#if>" data-class="theme4" data-value="4">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme5 <#if inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '5'>r3-im-checked</#if>" data-class="theme5" data-value="5">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme6 <#if inviteData?? && inviteData.consult_vsitorbtn_color?? && inviteData.consult_vsitorbtn_color == '6'>r3-im-checked</#if>" data-class="theme6" data-value="6">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
									</div>
								</div>
								<div class="r3-webim-tl" style="clear:both;">3、选择入口按钮位置</div>
								<div class="box-item">
									<input type="hidden" name="consult_vsitorbtn_position" id="consult_vsitorbtn_position" value="<#if inviteData??>${inviteData.consult_vsitorbtn_position!'right,middle'}<#else>right,middle</#if>">
									<div class="item-cnt r3-im-position" style="display: block;">
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'left:10px;top:10px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('left,top');"><div class="r3-pos <#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,top'>r3-pos-checked</#if>" style="left:-40px;top:0px;">左上</div></a>
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'left:10px;top:70px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('left,middle');"><div class="r3-pos <#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,middle'>r3-pos-checked</#if>" style="left:-40px;top:70px;">左中</div></a>
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'left:10px;bottom:10px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('left,bottom');"><div class="r3-pos <#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,bottom'>r3-pos-checked</#if>" style="left:-40px;bottom:0px;">左下</div></a>
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'right:10px;top:10px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('right,top');"><div class="r3-pos <#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,top'>r3-pos-checked</#if>" style="right:-40px;top:0px;">右上</div></a>
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'right:10px;top:70px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('right,middle');"><div class="r3-pos  <#if !(inviteData?? && inviteData.consult_vsitorbtn_position??) || (inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,middle')>r3-pos-checked</#if>" style="right:-40px;top:70px;">右中</div></a>
										<a href="javascript:void(0)" onclick="$('#r3-point-theme').attr('style' , 'right:10px;bottom:10px;position: absolute;margin-top:0px;');$('.r3-pos').removeClass('r3-pos-checked');$(this).children().first().addClass('r3-pos-checked');$('#consult_vsitorbtn_position').val('right,bottom');"><div class="r3-pos <#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,bottom'>r3-pos-checked</#if>" style="right:-40px;bottom:0px;">右下</div></a>
									</div>
								</div>
								<div class="r3-webim-prop">
									<div class="r3-webim-tl" style="clear:both;">4、入口按钮文本</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>用户访问接入网站的时候提示用户操作的文本内容</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">默认提示文本是：在线客服</p>
											</div>
											<div class="col-lg-4">
												<input type="text" name="consult_vsitorbtn_content" id="consult_vsitorbtn_content" value="<#if inviteData??>${inviteData.consult_vsitorbtn_content!'在线客服'}<#else>在线客服</#if>" autocomplete="off" class="layui-input" onkeyup="$('#consult_content').text($(this).val())" onchange="$('#consult_content').text($(this).val())">
											</div>
										</div>
									</div>
								</div>
								<div class="r3-webim-prop">
								
									<div class="r3-webim-tl" style="clear:both;">5、延时显示</div>
									<div class="box-item">
										<div class="row">
											<div class="col-lg-8">
												<p>用户访问接入网站的时候提示用户的按钮弹出延时时间</p>
												<p style="color:#888888;font-size:13px;margin-top:10px;">如果不设置延时时间，则页面载入即显示入口按钮</p>
											</div>
											<div class="col-lg-4">
												<select name="consult_vsitorbtn_display">
												  <option value="0" <#if !(inviteData??) || (inviteData?? && inviteData.consult_vsitorbtn_display == 0)>selected="selected"</#if>>无延时</option>
												  <option value="1000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 1000>selected="selected"</#if>>1秒</option>
												  <option value="2000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 2000>selected="selected"</#if>>2秒</option>
												  <option value="3000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 3000>selected="selected"</#if>>3秒</option>
												  <option value="4000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 4000>selected="selected"</#if>>4秒</option>
												  <option value="5000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 5000>selected="selected"</#if>>5秒</option>
												  <option value="10000" <#if inviteData?? && inviteData.consult_vsitorbtn_display == 10000>selected="selected"</#if>>10秒</option>
												</select>     					
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="col-md-4" style="padding-top:50px;">
								<div class="r3-im-point" id="r3-point"
									<#assign position = "right:10px;top:80px;">
									<#if inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,top'>
										<#assign position = "left:10px;top:10px;">
									<#elseif inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,middle'>
										<#assign position = "left:10px;top:80px;">
									<#elseif inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'left,bottom'>
										<#assign position = "left:10px;bottom:10px;">
									<#elseif inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,top'>
										<#assign position = "right:10px;top:10px;">
									<#elseif inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,middle'>
										<#assign position = "right:10px;top:80px;">
									<#elseif inviteData?? && inviteData.consult_vsitorbtn_position?? && inviteData.consult_vsitorbtn_position == 'right,bottom'>
										<#assign position = "right:10px;bottom:10px;">
									</#if>
									style="width: 227px;height: 200px;border-radius: 2px;padding: 70px 20px;">
									<div class="r3-point-theme<#if inviteData??>${inviteData.consult_vsitorbtn_model!'1'}<#else>1</#if> r3-theme-color theme<#if inviteData??>${inviteData.consult_vsitorbtn_color!'1'}<#else>1</#if>"
										style="text-align:center;position: absolute;${position!''}" id="r3-point-theme">
	
										<div class="r3-im-point-text">
											<i class="layui-icon chat-icon">&#xe63a;</i> <br> <span id="consult_content"><#if inviteData??>${inviteData.consult_vsitorbtn_content!'在线客服'}<#else>在线客服</#if></span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
	
				</div>
				<div class="box default-box">
					<div class="box-header">
						<h3 class="box-title">对话框样式</h3>
					</div>
					<div class="box-body r3-im-theme">
						<div class="row" style="margin-right:0px;">
							<div class="col-md-8">
								<div class="r3-webim-tl">1、选择对话框颜色</div>
								<div class="box-item">
									<div class="item-cnt r3-im-dialog" style="display: block;">
										<input type="hidden" name="consult_dialog_color" id="consult_dialog_color" value="<#if inviteData??>${inviteData.consult_dialog_color!'1'}<#else>1</#if>">
										<div class="r3-im-item theme1 <#if !(inviteData?? && inviteData.consult_dialog_color??) || (inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '1')>r3-im-checked</#if>"
											data-class="theme1" data-value="1">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme2 <#if inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '2'>r3-im-checked</#if>" data-class="theme2" data-value="2">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme3 <#if inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '3'>r3-im-checked</#if>" data-class="theme3" data-value="3">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme4 <#if inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '4'>r3-im-checked</#if>" data-class="theme4" data-value="4">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme5 <#if inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '5'>r3-im-checked</#if>" data-class="theme5" data-value="5">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
										<div class="r3-im-item theme6 <#if inviteData?? && inviteData.consult_dialog_color?? && inviteData.consult_dialog_color == '6'>r3-im-checked</#if>" data-class="theme6" data-value="6">
											<i
												class="layui-icon r3-im-check">&#xe618;</i>
										</div>
									</div>
								</div>
								<div class="r3-webim-tl">2、自定义LOGO</div>
								<div class="box-item" style="position: relative;">
									<span class="r3-logo">
										<img src="<#if inviteData?? && inviteData.consult_dialog_logo??>/res/image.html?id=${inviteData.consult_dialog_logo?url}<#else>/images/logo2.png</#if>" style="height:40px;">
									</span>
									<div class="layui-box layui-upload-button" style="position:absolute;left: 200px;">
										<input type="file" name="webimlogo" accept="image/gif, image/jpeg, image/png" lay-ext="jpg|png|gif"  class="layui-upload-file" onchange="$('#logo_img').html($(this).val());">
										<span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
									</div>
									<span id="logo_img" style="position:absolute;left: 350px;"></span>
									
									 
								</div>
	
								<div class="r3-webim-tl">3、自定义客服图标</div>
								<div class="box-item" style="position: relative;">
									<span class="r3-logo">
										<img src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" style="height:40px;">
									</span>
									<div class="layui-box layui-upload-button" style="position:absolute;left: 200px;">
										<input type="file" name="agentheadimg" accept="image/gif, image/jpeg, image/png" lay-ext="jpg|png|gif"  class="layui-upload-file" onchange="$('#agent_img').html($(this).val());">
										<span class="layui-upload-icon"><i class="layui-icon"></i>上传图片</span>
									</div>
									<span id="agent_img" style="position:absolute;left: 350px;"></span>
									
								</div>
							</div>
							<div class="col-md-4">
								<div class="r3-im-preview r3-im-preview-dialog" id="pv">
									<div class="r3-im-preview-wrap" id="auto-id-1463017758528"
										style="border:1px solid #EAEAEA">
										<div class="r3-im-preview-bar r3-theme-color theme<#if inviteData??>${inviteData.consult_dialog_color!'1'}<#else>1</#if>" style="padding:5px;">
											<img src="<#if inviteData?? && inviteData.consult_dialog_logo??>/res/image.html?id=${inviteData.consult_dialog_logo?url}<#else>/images/logo2.png</#if>" style="height:20px;float:left;">
											<span style="float:right;">	
												<i class="layui-icon" style="font:size:12px;color:#ffffff;">&#x1006;</i>
											</span>
										</div>
										<div class="r3-im-preview-tip"></div>
										<div class="r3-im-preview-tip" style="width:70%;height:5px;"></div>
										<div class="r3-im-preview-customer">
											<i class="layui-icon" style="color:#377FED;float:left;">&#xe612;</i>
											<div
												class="r3-im-preview-customer-message r3-im-preview-customer-arrow">
	
											</div>
										</div>
										<div class="r3-im-preview-user">
											<img src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" style="height:20px;float:right;">
											<div
												class="r3-im-preview-user-message r3-im-preview-user-arrow r3-theme-color theme<#if inviteData??>${inviteData.consult_dialog_color!'1'}<#else>1</#if>"
												style="width:150px;"></div>
										</div>
	
										<div class="r3-im-preview-user" style="height:60px;">
											<img src="<#if inviteData?? && inviteData.consult_dialog_headimg??>/res/image.html?id=${inviteData.consult_dialog_headimg?url}<#else>/images/agent.png</#if>" style="height:20px;float:right;">
											<div
												class="r3-im-preview-user-message r3-im-preview-user-arrow r3-theme-color theme<#if inviteData??>${inviteData.consult_dialog_color!'1'}<#else>1</#if>"
												style="width:100px;height:50px;"></div>
										</div>
	
										<div class="r3-im-preview-hr"></div>
	
										<div class="r3-im-preview-submit">
											<i class="fa fa-image" style="color:#dddddd;float:left;"></i>
										</div>
										<div class="r3-im-preview-submit">
											<a class="r3-im-theme-submit-btn r3-theme-color theme<#if inviteData??>${inviteData.consult_dialog_color!'1'}<#else>1</#if>">发送</a>
										</div>
	
									</div>
								</div>
							</div>
						</div>
					</div>
	
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-lg-3"></div>
		<div class="col-lg-9">
			<div class="layui-form-item">
	          <div class="layui-input-block">
	            <button class="layui-btn" lay-submit="" lay-filter="formDemo">保存</button>
	            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	          </div>
	        </div>
		</div>
	</div>
</form>

<script language="javascript"> 		
	layui.use('upload', function(){
		var target = $(this).attr("data-target");
	});
	layui.use('form', function(){
		var form = layui.form();
		form.render('select'); //刷新select选择框渲染
	});
			
	$(document)
			.ready(
					function() {
						$('.r3-im-dialog .r3-im-item')
								.click(
										function() {
											var theme = $(this).attr(
													'data-class');
											$('#pv .r3-theme-color')
													.each(
															function() {
																$(this)
																		.removeClass(
																				"theme1 theme2 theme3 theme4 theme5 theme6")
																		.addClass(
																				theme);
															});
											$('.r3-im-dialog .r3-im-item')
													.removeClass(
															'r3-im-checked');
											$(this).addClass('r3-im-checked');
											$('#consult_dialog_color').val($(this).attr('data-value'));
										});
						$('.r3-im-ping-color .r3-im-item')
								.click(
										function() {
											var theme = $(this).attr(
													'data-class');
											$('#r3-point .r3-theme-color')
													.each(
															function() {
																$(this)
																		.removeClass(
																				"theme1 theme2 theme3 theme4 theme5 theme6")
																		.addClass(
																				theme);
															});
											$('.r3-im-ping-color .r3-im-item')
													.removeClass(
															'r3-im-checked');
											$(this).addClass('r3-im-checked');
											$('#consult_vsitorbtn_color').val($(this).attr('data-value'));
										});
						$('.r3-im-point')
								.click(
										function() {
											$("#r3-point-theme")
													.removeClass(
															"r3-point-theme1 r3-point-theme2 r3-point-theme3")
													.addClass(
															$(this)
																	.attr(
																			'data-class'));
											$('.r3-im-point').removeClass(
													"r3-point-checked");
											$(this)
													.addClass(
															"r3-point-checked");
											$('#consult_vsitorbtn_model').val($(this).attr('data-value'));
										});
					});
</script>

